<template>
  <a-breadcrumb style="background: white;padding: 16px 32px;font-size: 16px">
    <a-breadcrumb-item href="">
      <home-outlined/>
    </a-breadcrumb-item>
    <a-breadcrumb-item>学校管理</a-breadcrumb-item>
  </a-breadcrumb>
  <div style="padding: 16px">
    <a-card style="height: min-content;margin-bottom: 16px">
      <a-form
          :model="formState"
          name="horizontal_login"
          layout="inline"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            label="名称"
            name="username"
        >
          <a-input v-model:value="formState.name">
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="height: min-content">
      <div style="display: flex;flex-direction: row;align-items: center;margin-bottom: 16px">
        <span style="font-size: 16px;font-weight: bolder">学校列表</span>
        <div style="flex: 1"></div>
        <a-button type="primary" ><PlusOutlined /> 新增</a-button>
      </div>
      <a-table class="ant-table-striped"
               :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"  :columns="columns" :data-source="data" :scroll="{ x: 100}">
        <template #bodyCell="{ column ,record}">
          <template v-if="column.key === 'photo'">
            <img style="width: 48px;height: 48px" src="https://gaoxiao.jszs.com/Public/college/logo/zyt_r86n72cq.jpg">
          </template>
          <template v-if="column.key === 'operation'">
            <a>编辑</a>
            <a-divider type="vertical" />
            <a @click="gotoSchoolInfo(record)">查看</a>
            <a-divider type="vertical" />
            <a>删除</a>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import {h, reactive, ref} from 'vue';

export default {
  name: "schoolManage",
  data() {
    const formState = reactive({
      name: ''
    });
    const columns = [
      {
        title: 'id',
        width: 40,
        dataIndex: 'id',
        key: 'id',
        fixed: 'left',
      },
      {
        title: '校徽',
        width: 100,
        dataIndex: 'photo',
        key: 'photo',
        fixed: 'left',
      },
      {
        title: '校名',
        width: 100,
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
      },
      {
        title: '创建时间',
        dataIndex: 'creatTime',
        key: '1',
        width: 150,
      },
      {
        title: '修改时间',
        dataIndex: 'updateTime',
        key: '2',
        width: 150,
      },
      {
        width: 120,
        title: '操作',
        key: 'operation',
        fixed: 'right',
      },
    ];
    const data = [];
    for (let i = 0; i < 100; i++) {
      data.push({
        index:i,
        id:i,
        key: i,
        name: `昆明理工大学`,
        age: 32,
        creatTime:'2024-04-11 00:00:00',
        updateTime:'2024-04-11 00:00:00',
        address: `London Park no. ${i}`,
      });
    }
    return {
      formState,
      columns,
      data
    }
  },
  methods: {
    onFinish(values) {
      console.log('Success:', values);
    },
    onFinishFailed(errorInfo) {
      console.log('Failed:', errorInfo);
    },
    gotoSchoolInfo(e){
      console.log(e)
      this.$router.push({path:'/index/schoolInfo'})
    }
  }
}
</script>

<style scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>